<template>
	<view class="content">
		<view v-if="isLoading" class="loadingico">
			<image style="width:50px;height: 50px;" src="../../static/images/loading.gif"></image>
		</view>
		<view v-else>
			<view class="item" v-for="(shuzhailist, index) in shuzhailists" :key="index">
				<view class="header">
					<view class="userinfo">
						<image v-if="shuzhailist.users.avatar_file == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
						<image v-else class="face" :src="'https://www.yedushu.cn/' + shuzhailist.users.avatar_file"></image>
						<view class="username">
							<view class="name">{{shuzhailist.users.user_name}}</view>
							<view class="addtime">{{formatDate(shuzhailist.add_time)}}</view>
						</view>
					</view>
					<view class="right">
						<view class="yuyin">
							<image class="voice" src="../../static/images/voice.png"></image>						
						</view>
						<view class="gengduo">
							<image class="more" src="../../static/images/ht_more.png"></image>
						</view>
					</view>
				</view>
				<view class="shuzhaineirong">
					<view class="bookname">{{shuzhailist.books.book_name}}</view>
					<view class="zuozhe">{{shuzhailist.books.zuozhe}}</view>
					<rich-text class="shuzhai" :nodes="shuzhailist.content" selectable="true"></rich-text>
				</view>
				<view class="xiangfaneirong" v-if="shuzhailist.xiangfa != null">
					<view class="xiangfatip">一点想法</view>					
					<rich-text class="xiangfa" :nodes="shuzhailist.xiangfa" selectable="true"></rich-text>
				</view>
				<view class="footer">
					<view class="like">
						<image class="likeico" src="../../static/images/ic_feedback_like.png"></image>
						<text class="fonttext">0</text>
					</view>
					<view class="liuyan">
						<image class="liuyanico" src="../../static/images/ic_comment.png"></image>
						<text class="fonttext">0</text>
					</view>
					<view class="fenxiang">
						<image class="fenxiangico" src="../../static/images/ic_repost.png"></image>
						<text class="fonttext">0</text>
					</view>
					<navigator class="" hover-class="none" :url="'./bookinfo?bookid=' + shuzhailist.books.book_id + '&bookname=' + shuzhailist.books.book_name + '&index=' + index">
					<view class="lianjie">
						<image class="lianjieico" src="../../static/images/ic_readable_list_s.png"></image>
						<text class="fonttext"></text>
					</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import formatDate from '../../components/formatDate/formatDate.js';
	export default {
		data() {
			return {
				shuzhailists: [], // 书摘列表
				current_page: 1,
				isLoading: false
			}
		},
		onLoad() {
			this.isLoading = true;
			this.getShuzhailist();
			this.isLoading = false;
		},
		onPullDownRefresh() {
			// 下拉刷新
			// 清空数据
			this.shuzhailists = [];
			// 获取第一页数据
			this.current_page = 1;
			// 开始获取数据
			this.getShuzhailist();
		},
		onReachBottom() {
			// 上拉加载更多
			// 获得当前页面
			this.current_page = this.current_page + 1;
			this.getShuzhailist();
		},
		methods: {
			getShuzhailist() {
				uni.request({
					url: 'https://www.yedushu.cn/api/shuzhailist?page=' + this.current_page,
					success: (res) => {
						// console.log(JSON.stringify(res.data));
						// this.shuzhailists = res.data.data;
						// this.isLoading = false;
						if(res.data.last_page > this.current_page)
						{
							// this.isLoading = true;
						}
						// 当前以后数据连接新获取的数据
						this.shuzhailists = this.shuzhailists.concat(res.data.data);
						// 停止页面刷新动画
						uni.stopPullDownRefresh();
					}
				});
			},
			formatDate(riqi) {
				// 计算日期
				return formatDate(riqi);
			},
		}
	}
</script>

<style>
	page{
		background: #F1F1F1;
	}
	.content {
		display: flex;
		flex-direction: column;
	}
	.loadingico {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item {
		display: flex;
		flex-direction: column;
		padding: 10px 10px;
		margin-bottom: 10px;
		background-color: #FFFFFF;
	}
	.item .header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.item .header .userinfo {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item .header .userinfo .face {
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}
	.item .header .userinfo .username {
		padding-left: 10px;
	}
	.item .header .userinfo .username .name {
		font-size: 14px;
	}
	.item .header .userinfo .username .addtime {
		font-size: 12px;
		color: #494949;
	}
	.item .header .right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item .header .right .voice {
		width: 25px;
		height: 25px;
		padding: 0 10px;
	}
	.item .header .right .more {
		width: 6px;
		height: 21px;
		padding: 0 10px;
	}
	.item .shuzhaineirong {
		padding: 10px 0;
	}
	.item .shuzhaineirong .bookname {
		font-size: 20px;
		font-weight: 500;
		text-align: center;
	}
	.item .shuzhaineirong .zuozhe {
		font-size: 14px;
		color: #2C405A;
		text-align: center;
	}
	.item .shuzhaineirong .shuzhai {
		padding: 15px 0;
		font-size: 16px;
		line-height: 25px;
	}
	.item .xiangfaneirong {
		padding: 10px 0;
	}
	.item .xiangfaneirong .xiangfatip {
		font-size: 17px;
		text-align: center;
	}
	.item .xiangfaneirong .xiangfa {
		padding: 10px 0;
		font-size: 16px;
		line-height: 25px;
	}
	.item .footer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30px;
	}
	.item .footer .likeico {
		width: 25px;
		height: 25px;
	}
	.item .footer .liuyanico {
		width: 25px;
		height: 25px;
	}
	.item .footer .fenxiangico {
		width: 25px;
		height: 25px;
	}
	.item .footer .lianjieico {
		width: 25px;
		height: 25px;
	}
	.item .footer .fonttext {
		font-size: 13px;
	}
	.item .footer .like {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item .footer .liuyan {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item .footer .fenxiang {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item .footer .lianjie {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
